<!--
 * @Author: jyq
 * @Date: 2022-07-01 10:11:17
 * @LastEditTime: 2022-07-07 10:49:30
 * @LastEditors: jyq
 * @Description: 
 * @FilePath: \dasantest2\day06\vue3-project\src\views\MyView.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div class="my">
    <div class="header">
        <div class="left" @click="consDialog">
        <van-image
            round
            class="headimg"
            src="https://img.youpin.mi-img.com/shopcenter/7dhur6i77hg_11350267611625208274363.png"
            />
        </div>
        <div class="middle">{{user?user:"请登录"}}</div>
        <div class="right">
          <van-icon style="margin-right: -5px;" name="https://cdn.cnbj1.fds.api.mi-img.com/mijia-m/production/yrn-buz-shop-center/res/images/icons/icon_arrow_right_darkgray.png"  size="20" />
        </div>
    </div>
    <div class="main">
      <van-cell-group style="margin-top: 5px;">
       <van-cell class="maintitle" center  title="我的订单" @click="consDialog"  is-link  />
      </van-cell-group>  
          <van-row>
          <van-col span="6">
            <div class="mycard">
                      <van-icon class="myIcon Icon40 "  name="https://img.youpin.mi-img.com/shopcenter/1su4kcv21eg_22212270231600948691418.png" />
              <div class="title">
                  待付款
              </div>
            </div>
          </van-col>
          <van-col span="6">
            <div class="mycard">
                      <van-icon  class="myIcon Icon40 "   name="https://img.youpin.mi-img.com/shopcenter/2rsi345c8a_22212270231600948691450.png" />
              <div class="title">
                  待收货
              </div>
            </div>
          </van-col>
          <van-col span="6">
            <div class="mycard">
                      <van-icon  class="myIcon Icon40 " name="https://img.youpin.mi-img.com/shopcenter/n9q7tuhs6ao_22212270231600948691455.png" />
              <div class="title">
                  评价
              </div>
            </div>
          </van-col>
          <van-col span="6">
            <div class="mycard">
                      <van-icon  class="myIcon Icon40 "  name="https://img.youpin.mi-img.com/shopcenter/q69ib1u9teg_22212270231600948691439.png" />
              <div class="title">
                  退款/售后
              </div>
            </div>
          </van-col>
          </van-row>
      <van-cell-group style="margin-top: 7px;">
          <van-cell  center is-link>
         <template #title>
             <van-icon  class="myIcon Icon33"  
              name="https://cdn.cnbj1.fds.api.mi-img.com/mijia-m/production/yrn-buz-shop-center/res/images/ucenter/ucenter_icon_myassets.png" />
               <div class="content-text"> 
                我的资产
              </div>
         </template>
         </van-cell>
          <van-cell  center is-link>
          <template #title>
             <van-icon   class="myIcon Icon33" name="https://cdn.cnbj1.fds.api.mi-img.com/mijia-m/production/yrn-buz-shop-center/res/images/ucenter/ucenter_icon_coupon_new.png" />
               <div class="content-text"> 
                优惠券
              </div>
         </template>
          </van-cell>
          <van-cell center is-link >
            <template #title>
             <van-icon class="myIcon Icon33" name="https://cdn.cnbj1.fds.api.mi-img.com/mijia-m/production/yrn-buz-shop-center/res/images/ucenter/ucenter_icon_collection.png" />
               <div class="content-text"> 
                我的收藏
              </div>
         </template>
          </van-cell>

       </van-cell-group>
       <van-cell-group style="margin-top: 5px;">
          <van-cell center is-link >
            <template #title>
             <van-icon  class="myIcon Icon33" name="https://cdn.cnbj1.fds.api.mi-img.com/mijia-m/production/yrn-buz-shop-center/res/images/ucenter/ucenter_icon_address.png" />
               <div class="content-text"> 
                地址管理
              </div>
         </template>
          </van-cell>
          <van-cell center is-link >
            <template #title>
             <van-icon  class="myIcon Icon33" name="https://shop.io.mi-img.com/app/shop/img?id=shop_0556651f21ebb90fd2094de25cfeeeff.png&w=114&h=114" />
               <div class="content-text"> 
                资质证照
              </div>
         </template>
          </van-cell>
          <van-cell center is-link>
            <template #title>
             <van-icon  class="myIcon Icon33" name="https://shop.io.mi-img.com/app/shop/img?id=shop_eec55569c325c1641e1cd47ba572b83b.png&w=114&h=114" />
               <div class="content-text"> 
                协议规则
              </div>
         </template>
          </van-cell>
          <van-cell center  is-link>
            <template #title>
             <van-icon class="myIcon Icon33" name="https://cdn.cnbj1.fds.api.mi-img.com/mijia-m/production/yrn-buz-shop-center/res/images/ucenter/ucenter_icon_feedback.png" />
               <div class="content-text"> 
                帮助与反馈
              </div>
         </template>
          </van-cell>
       </van-cell-group>
       <van-cell-group v-if="user">
           <van-cell
              center
              is-link
              @click="exit">
              <template #title>
             <van-icon class="myIcon Icon33" name="https://cdn.cnbj1.fds.api.mi-img.com/mijia-m/production/yrn-buz-shop-center/res/images/ucenter/ucenter_icon_feedback.png" />
               <div class="content-text"> 
                退出登录
              </div>
         </template>
              
              </van-cell>
       </van-cell-group>
        </div>
  </div>
</template>
<script lang="jsx"  setup>
    import { Dialog, Toast } from 'vant';
    import 'vant/es/dialog/style';
    import {useRouter} from 'vue-router';
    const router = useRouter()
    const consDialog= ()=>{
           if(!user){
             Dialog.confirm({
            confirmButtonText:"同意",
            cancelButtonText:"不同意",
            message: () => (
            <div class="jsxDiv">
                <div class="title">声明与政策</div>
                欢迎您来到小米有品！
                <br />
                您可在有品进行商品浏览、支付购买、售后服务等功能。我们将严格遵守相关法律法规和隐私政策以保护您的个人信息。请您阅读并同意
                <a
                class="lib10-secret-dialog-url"
                href="https://m.xiaomiyoupin.com/content/ewen/pageFromId?id=1qctd9&amp;opapp=2&amp;noDL=1&amp;noPolicy=1"
                >
                《小米有品用户协议》
                </a>
                、
                <a
                class="lib10-secret-dialog-url"
                href="https://m.xiaomiyoupin.com/content/ewen/pageFromId?id=jazizae6ehd0mtv6&amp;spmref=0.0.0.0.16310973661545810&amp;noPolicy=1"
                >
                《隐私政策》
                </a>
                、
                <a
                class="lib10-secret-dialog-url"
                href="https://m.xiaomiyoupin.com/content/ewen/pageFromId?id=9ofwmkzlh29or2pk&amp;opapp=2&amp;noPolicy=1"
                >
                《小米账号使用协议》
                </a>
                和
                <a
                class="lib10-secret-dialog-url"
                href="https://privacy.mi.com/miaccount/zh_CN/?noPolicy=1"
                >
                《小米账号隐私政策》
                </a>
                。
            </div>
            ),            
            })
            .then(() => {
            router.push('/login')
            })
            .catch(() => {
            // on cancel
            });
           }{
            Toast("点击按钮")
           }

           }
   const user = sessionStorage.getItem('user')
   const exit = ()=>{
    // 删除sessionStorage的两种方法
    // delete sessionStorage.user;
    sessionStorage.removeItem('user');
    router.push('/')
    // sessionStorage.removeItem('user');
   }
</script>
<style lang="less" scoped>
.my{
  background-color: #f3f3f3;
}
.headimg{
  width:60px;
  height: 60px;
}
.maintitle{
  color: rgb(51,51,51);
  font-size:14px;
}
.header{
    height: 100px;
    background-color: #7f6044;
    .left{
        float: left;
        margin-left: 25px;
        margin-top: 20px;
    }
    .middle{
        color:#fff;
        font-size: 14px;
        float: left;
        padding-left: 20px;
        line-height: 100px;
    }
    .right{
        float: right;
        padding-right: 25px;
        line-height: 100px;
    }
}
.content-text{
  margin-top: 5px;
}
.mycard{
  background-color: #fff;
}
.title{
  font-size:13px;
  margin-left: 20px;
  padding-bottom: 5px;
}
 .Icon40{
    font-size: 40px;
    margin-left: 20px;
  }
  .Icon33{
    font-size: 33px;
    float: left;
  }

</style>

<style lang="less">
.jsxDiv {
  font-size: 13px;
  color: #999999;
  line-height:23px;
  .title {
    color: rgb(51, 51, 51);
    text-align: center;
    font-size: 17px;
    display: block;
    margin-bottom: 19px;
  }
}
.lib10-secret-dialog-url {
  color: rgb(159, 128, 82);
  text-decoration: none;
}
:root{
  --van-dialog-border-radius:8px;
}
</style>